<!--
 * @Author: 曹捷
 * @Date: 2020-06-19 09:52:07
 * @LastEditors: 曹捷
 * @LastEditTime: 2020-06-19 11:44:25
 * @Description: 修改密码
--> 
<template>
  <div class="app-main back-while">
    <div class="main-box m-t-30">
      <obitInput class="bottom-info" placeholder="输入旧密码" type="password" v-model="params.oldPsw"></obitInput>
      <obitInput class="bottom-info" placeholder="输入密码" type="password" v-model="params.newPsw"></obitInput>
      <obitInput class="bottom-info" placeholder="再次输入密码" type="password" v-model="params.pswAgain"></obitInput>
    </div>
    <view class="p-l-20 p-r-20 m-t-50">
      <button :class="{'btn-disable':!validateStatus}" @click="submit" class="zaiui-btn">确认修改</button>
    </view>
  </div>
</template>

<script>
import validate from '@/app-modules/mixin/validate.js'
export default {
  mixins: [validate],
  data() {
    var validatorPsw = value => {
      if (this.params.newPsw !== this.params.pswAgain) {
        return '两次输入的密码不一致，请检查'
      }
    }
    return {
      params: {
        oldPsw: '',
        newPsw: '',
        pswAgain: ''
      },
      rules: {
        oldPsw: [{ required: true, message: '请输入当前密码' }],
        newPsw: [
          { required: true, message: '请输入新密码' },
          { min: 6, max: 16, message: '密码长度必须在6-16个字符以内' },
          { validator: validatorPsw }
        ],
        pswAgain: [
          { required: true, message: '请输入二次密码' },
          {
            min: 6,
            max: 16,
            message: '再次输入的密码长度必须在6-16个字符以内'
          },
          { validator: validatorPsw }
        ]
      }
    }
  },
  computed: {
    validateStatus() {
      let valide = this.validate(this.params, this.rules, false)
      return valide
    }
  },
  methods: {
    submit() {
      let valide = this.validate(this.params, this.rules)
      if (valide) {
        this.showToast('验证成功')
      }
    }
  }
}
</script>

<style lang="scss">
.bottom-info {
  margin: 30rpx 0;
}
</style>
